<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>购物车</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
        }

        header,
        footer {
            background-color: #fff;
            padding: 10px 20px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        }

        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            font-size: 24px;
            font-weight: bold;
            color: #ff6666;
        }

        .nav {
            display: flex;
            align-items: center;
        }

        .nav a {
            text-decoration: none;
            color: #333;
            margin: 0 10px;
        }

        .nav .welcome {
            color: #999;
            margin: 0 10px;
        }

        .nav .logout {
            color: #ff6666;
            cursor: pointer;
            margin: 0 10px;
        }

        main {
            width: 90%;
            margin: 40px auto;
            background-color: #fff;
            padding: 20px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
            border-radius: 4px;
        }

        .cart-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid #eee;
        }

        .item-info {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .item-info img {
            width: 80px;
            height: 80px;
            object-fit: cover;
        }

        .item-controls {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .item-controls button {
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border: 1px solid #ccc;
            background: #fff;
            cursor: pointer;
            border-radius: 4px;
        }

        .total {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 20px;
            font-size: 18px;
            padding: 10px 0;
        }

        .total-amount {
            font-weight: bold;
        }

        .checkout-btn {
            background-color: #ff6666;
            color: #fff;
            border: none;
            padding: 10px 20px;
            font-size: 16px;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .checkout-btn:hover {
            background-color: #ff4d4d;
        }

        footer {
            text-align: center;
            color: #999;
            margin-top: 20px;
            background-color: #333;
            padding: 15px 0;
        }
    </style>
</head>

<body>
    <header>
        <div class="logo">闪购</div>
        <div class="nav">
            <a href="index.html">首页</a>
            <span class="welcome">欢迎, <span id="username">游客</span></span>
            <span class="logout" onclick="cartManager.logout()">退出登录</span>
        </div>
    </header>

    <main>
        <h2>我的购物车</h2>
        <div id="cartList">
        </div>
        <div class="total">
            <div class="total-amount">总计: <span id="totalPrice">¥0.00</span></div>
            <button class="checkout-btn" onclick="cartManager.checkout()">结算</button>
        </div>
    </main>

    <footer>
        <p>©2025 闪购</p>
    </footer>

    <script>
        class CartManager {
            constructor() {
                this.usernameSpan = document.getElementById('username');
                this.cartList = document.getElementById('cartList');
                this.totalPriceDom = document.getElementById('totalPrice');

                // 检查用户是否已登录，如果未登录则跳转到登录页
                this.checkLoginStatus();
                this.init();
            }

            // 检查登录状态
            checkLoginStatus() {
                const username = localStorage.getItem('username');
                if (!username) {
                    window.location.href = 'login.html';
                }
            }

            init() {
                this.updateUsername();
                this.renderCart();
            }

            // 更新用户名显示
            updateUsername() {
                const storedUsername = localStorage.getItem('username');
                this.usernameSpan.textContent = storedUsername || '游客';
            }

            // 获取当前用户的购物车数据
            getCartData() {
                const username = localStorage.getItem('username');
                const allCarts = JSON.parse(localStorage.getItem('allCarts') || '{}');
                return allCarts[username] || [];
            }

            // 保存当前用户的购物车数据
            saveCartData(cart) {
                const username = localStorage.getItem('username');
                const allCarts = JSON.parse(localStorage.getItem('allCarts') || '{}');
                allCarts[username] = cart;
                localStorage.setItem('allCarts', JSON.stringify(allCarts));
            }

            // 渲染购物车
            renderCart() {
                const cart = this.getCartData();
                let total = 0;

                this.cartList.innerHTML = '';

                if (cart.length === 0) {
                    this.cartList.innerHTML = '<p style="text-align: center; padding: 20px;">您的购物车是空的，快去添加商品吧！</p>';
                } else {
                    cart.forEach((item, index) => {
                        const itemDom = document.createElement('div');
                        itemDom.className = 'cart-item';
                        itemDom.innerHTML = `
                            <div class="item-info">
                                <img src="${item.image}" alt="${item.name}">
                                <div>
                                    <p>${item.name}</p>
                                    <p>¥${item.price}</p>
                                </div>
                            </div>
                            <div class="item-controls">
                                <button onclick="cartManager.decrease(${index})">-</button>
                                <span id="quantity-${index}">${item.quantity || 1}</span>
                                <button onclick="cartManager.increase(${index})">+</button>
                                <button onclick="cartManager.deleteItem(${index})" style="color: red;">删除</button>
                            </div>
                        `;
                        this.cartList.appendChild(itemDom);

                        total += item.price * (item.quantity || 1);
                    });
                }

                this.totalPriceDom.textContent = `¥${total.toFixed(2)}`;
            }

            // 减少商品数量
            decrease(index) {
                const cart = this.getCartData();
                const item = cart[index];

                if (item.quantity > 1) {
                    item.quantity--;
                } else {
                    cart.splice(index, 1);
                }

                this.saveCartData(cart);
                this.renderCart();
            }

            // 增加商品数量
            increase(index) {
                const cart = this.getCartData();
                const item = cart[index];
                item.quantity = (item.quantity || 1) + 1;

                this.saveCartData(cart);
                this.renderCart();
            }

            // 删除商品
            deleteItem(index) {
                const cart = this.getCartData();
                cart.splice(index, 1);

                this.saveCartData(cart);
                this.renderCart();
            }

            // 结算
            checkout() {
                const cart = this.getCartData();

                if (cart.length === 0) {
                    alert('您的购物车是空的，无法结算！');
                    return;
                }

                alert('订单提交成功！');
                // 清空当前用户的购物车
                this.saveCartData([]);
                this.renderCart();
            }

            // 退出登录
            logout() {
                localStorage.removeItem('username');
                window.location.href = 'login.html';
            }
        }

        const cartManager = new CartManager();
    </script>
</body>

</html>